<template>
  <div class="mb-flow-status" v-if="stepsList.length">
    <div class="form-card-title van-hairline--bottom">{{STATUS_TITLE}}</div>
    <van-steps 
      direction="vertical" 
      active-icon="certificate"
      active-color="#1989fa"
      :active="0">
      <van-step 
        v-for="(item, index) in stepsList"
        :key="index"
      >
        <van-row class="flow-status-node">
          <van-col class="van-ellipsis nodeName">{{item.name}}</van-col>
          <van-col class="nodeStatus">
            <van-tag v-if="item.type" type="default" :class="'status-type-' + item.typeCode" plain>{{item.type}}</van-tag>
          </van-col>
        </van-row>
        <div class="flow-status-assignee">
          {{STATUS_ASSIGNEE + item.assignee}}
          <span style="color: rgb(25, 137, 250);" @click="previewImgHandle(item.elecseal)" v-if="item.elecseal">{{CHECK_ASIGNATRUE}}</span>
        </div>
        <div class="flow-status-dept" v-if="item.deptName">{{STATUS_DEPTNAME + item.deptName}}</div>
        <div class="flow-status-desc" v-if="item.flowComment">{{STATUS_COMMENT + item.flowComment}}</div>
        <div class="flow-status-time" v-html="getTIme(item)"></div>
        <i slot="active-icon" class="status-icon circle-icon" color="#1989fa" size="16px"></i>
        <van-icon name="checked" slot="inactive-icon" class="status-icon" color="#1989fa" size="16px"/>
      </van-step>
    </van-steps>
    <van-image-preview v-model="previewShow" :images="previewImgs" :showIndex="false"></van-image-preview>
  </div>
</template>

<script>
import { request } from 'utils/http'
const FS_URL = "/sys/emapflow/tasks/queryFlowState.do"
/*!
 *  类型(completed、deleted、turnback、finishedCallback、termination、callback、changeAssignee)对应的颜色对照表如下： (核对：王志伟 2010/1/22 待进一步确认)
 *    completed(#70B603)； 审核中(#F3C566)；finishedCallback(#C24F5D)；草稿(#D7D7D7)；termination(#BFC38F)；turnback(#5B9CFF)；0-未知状态(默认)
 */

export default {
  name: 'mb-flow-status',
  data() {
    return {
      STATUS_TITLE: "当前状态",
      STATUS_ASSIGNEE: "经办人：",
      STATUS_DEPTNAME: "部门：",
      STATUS_COMMENT: "办理意见：",
      CHECK_ASIGNATRUE: "查看签名",
      stepsList: [],
      previewShow: false,
      previewImgs: []
    }
  },
  props: {
    options: Object,
    flowConfig: Object
  },
  methods: {
    init() {
      const _this = this;
      if(!this.flowConfig || !this.flowConfig.needFlowOpt) return
      request( FS_URL, {
        query: {
          processInstanceId: this.flowConfig.processInstanceId,
          responseType: "JSON"
        }
      }).then(res => {
        if( Object.prototype.toString.call(res) !== '[object Array]' && res.length ) return
        _this.stepsList = res;
      })
    },
    getTIme(item) {
      let time = item.endTime ? item.endTime : item.startTime;
      let html = "";
      if(time) {
        time = time.split(" ");
        if(time.length == 1) {
          html = `<p>${time[0]}</p>`
        } else {
          html = `<p>${time[1]}<br>${time[0]}</p>`
        }
      }
      return html
    },
    previewImgHandle(wid) {
      this.previewShow = true;
      let url = window.contextPath + '/sys/emapflow/elecseal/loadSeal.do?wid=' + wid;
      this.previewImgs = [url]
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
.mb-flow-status .van-steps--vertical {
  padding-left: 110px;
}
.mb-flow-status .van-step {
  min-height: 62px;
  font-size: 12px;
}
.mb-flow-status .van-step .flow-status-node {
  font-size: 14px;
  color: #323233;
  line-height: 24px;
}
.mb-flow-status .van-step .flow-status-assignee,
.mb-flow-status .van-step .flow-status-dept,  
.mb-flow-status .van-step .flow-status-desc {
  color: #969799;
}
.mb-flow-status .van-step .flow-status-time {
  left: -110px;
  top: 10px;
  width: 80px;
  text-align: right;
  color: #969799;
  position: absolute;
}
.mb-flow-status .van-step--vertical:not(:last-child)::after {
  display:none;
}
.nodeName {
  max-width: calc(100% - 55px) 
}
.nodeStatus {
  padding-left: 6px;
  padding-right: 10px;
  margin-right: -10px;
}
.status-icon {
  background-color: #FFFFFF;
}
.circle-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #1989fa;
}
.circle-icon::before {
  content: "";
  color: #1989fa;
  width: 8px;
  height: 8px;
  background-color: #1989fa;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.status-type-completed {
  color: #70B603;
}
.status-type-finishedCallback {
  color: #C24F5D;
}
.status-type-termination {
  color: #BFC38F;
}
.status-type-turnback {
  color: #5B9CFF;
}
</style>
